{% extends 'base.html.twig' %}

{% set meta = {
    title: 'All Packages',
    description: 'Symfony UX: a treasure chest of packages to solve your frontend problems',
    canonical: url('app_packages'),
} %}

{% block content %}
<div class="hero">
    <div class="container-fluid container-xxl px-4 pt-4 px-md-5">
        <h1 class="text-center mt-5">UX Packages</h1>
        <p class="text-center mt-2 mb-5">A treasure chest of bundles, components and packages</p>
    </div>
</div>

<div class="container-fluid container-xxl px-4 pt-4 px-md-5">
    {% block list %}
        <div style="display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));">
            {% for package in packages %}
                <twig:Package:PackageBox package="{{ package }}" titleTag="h2" />
            {% endfor %}
        </div>
    {% endblock %}
</div>
{% endblock %}

{% block aside %}
    {{ include('_aside.html.twig') }}
{% endblock %}
